<template>
	<view class="content">
		<my-header :title="parentTitle" @instruct="handinstruct" />
		<scroll-view :style="{paddingTop:padding}" @scroll="handleScroll" :scroll-y="true" class="shoplist-scroll">
			<view class="shoplist">
				<view class="shoplist-itme" @click="GoDetail(item.cid)" v-for="(item,index) in Commoditydata.value"
					:key="index">
					<image v-if="!item.url" :src="proxy.serverimageUrl + 'home/shopimg.png'" mode=""></image>
					<image v-else :src="item.url" mode=""></image>
					<view class="title">
						{{item.cname}}
					</view>
					<view class="inventory">
						库存:{{item.commodityInventory}}
					</view>
					<view class="pirceBox">
						<view class="price">
							<span class="span1">￥{{item.commodityPrice}}</span>
							<!-- <span class="span2">/件</span> -->
						</view>
						<image :src="proxy.serverimageUrl + 'home/addcar.png'" mode=""></image>
					</view>
				</view>
			</view>
		</scroll-view>
		<up-popup :show="show" @close="close" mode="center" :round="10">
			<h2 style="text-align: center;font-size: 36rpx;font-weight: bold;">{{tipsdata.title}}</h2>
			<scroll-view class="ScrollView" scroll-y="true">
				<view v-html="tipsdata.content">

				</view>
			</scroll-view>
			<view class="btnbox">
				<up-button color="#013CAA" @click="close">同意征订</up-button>
			</view>
			<view class="contactBox">
				<view class="text">
					如有疑问 请联系
				</view>
				<button class="btn" open-type="contact">在线客服
				</button>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		queryCommodityBySid,
		queryCommodityByCid,
		getTips
	} from '@/utils/api.js'
	import {
		useStore
	} from 'vuex'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import BASE_URL from '@/utils/env.js' //引入接口共用地址 //引入仓库，使用的是pinia
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	const baseUrl = BASE_URL
	console.log(proxy.serverimageUrl);
	/*引入vuex*/
	const store = useStore()
	const show = ref(false)
	console.log(show);
	/*引入emit*/
	const emit = defineEmits(['myEvent'])
	onLoad(() => {
		gettips()
		// getCommodity()
		logincode()
		uni.setStorageSync('orderbuy')
		uni.setStorageSync('ids')
	})
	onShow(() => {
		getCommodity()
	})
	/*弹窗关闭事件*/
	const close = () => {
		uni.getSetting({
			withSubscriptions: true,
			success(res) {
				console.log(res, 'res...............')
				console.log(res.authSetting, 'res.authSetting...............')
				console.log(res.subscriptionsSetting, 'res.subscriptionsSetting...............')
			}
		});
		let tmplId = ['0uJFTtz6lXCSOSbM1t3C9-pcgpujixgMrBDILA0XnIM', 'J7KISdfzUdRCJDMwO_wu64JSfsXS-3_mzjAkADfrDjE']
		uni.requestSubscribeMessage({
			tmplIds: tmplId, //template_ids
			success(res) {			
				if (res[tmplId[0]] == 'accept' && res[tmplId[1]] == 'accept') { //某条订阅信息 接收或者拒绝

				} else if (res[tmplId[0]] == 'reject' && res[tmplId[1]] == 'reject') { // 用户拒绝受权
				console.log(1);
					uni.showModal({
						title: '舒适提示',
						content: "您已关闭消息推送，如须要消息推送服务，请点击肯定跳转设置页面打开受权后再次尝试。",
						success: function(modal) {
							if (modal.confirm) { // 点击肯定
								uni.openSetting({
									withSubscriptions: true
								})
							}
						}
					})
				}
			},
			fail(err) {
				if (err.errCode == '20004') {
					uni.showModal({
						title: '温馨提示',
						content: "您的消息订阅主开关已关闭，如须要消息推送服务，请点击肯定跳转设置页面打开受权后再次尝试。",
						success: function(modal) {
							if (modal.confirm) { // 点击肯定
								uni.openSetting({
									withSubscriptions: true
								})
							}
						}
					})
				}
			}
		})
		show.value = false
	}
	const tipsdata = ref({})
	const gettips = () => {
		show.value = true
		console.log(show);
		console.log(1);
		getTips().then(res => {
			tipsdata.value = res.data[0]
		})
	}
	const logincode = () => {
		uni.login({
			"provider": "weixin",
			success: function(loginRes) {
				// 登录成功
				let code = loginRes.code
				uni.getUserInfo({
					provider: 'weixin',
					success: function(info) {
						uni.request({
							url: baseUrl + '/tong_anna/getWxOpenID',
							data: {
								code: code,
							},
							method: 'POST',
							success: (res) => {
								if (res.data.code === 200) {
									uni.setStorageSync('openid', res.data
										.data)
									// upopshow.value = false
								}
								// else {
								// 	uni.showModal({
								// 		title: res.data.msg
								// 	})
								// }
								//获得token完成登录
								// uni.setStorageSync('token',res.token)
							}
						});
					}
				})
			},
			fail: function(err) {
				// 登录授权失败  
				// err.code是错误码
			}

		})
	}
	/*头部组件标题*/
	const parentTitle = ref('童安娜商城')
	/*点击商品跳转至商品详情*/
	const GoDetail = (cid) => {
		uni.navigateTo({
			url: '/subpages/ProductDetails/index?cid=' + cid
		})
	}
	/*请求商品数据默认参数*/
	const Commodityform = reactive({
		sid: uni.getStorageSync('sid'),
		pageNum: 1,
		pageSize: 10
	})
	/*用于头部组件返回事件*/
	const instruct = ref('back')
	const handinstruct = (instruct) => {
		switch (instruct) {
			// 返回
			case 'back':
				uni.redirectTo({
					url: '/pages/Login/index'
				})
				break;
		}
	}
	/*获取商品接口数据*/
	const Commoditydata = reactive([])
	/*请求商品数据方法接口*/
	const getCommodity = () => {
		const params = {
			...Commodityform
		}
		queryCommodityBySid(params).then(res => {
			if (res.code == 200) {
				Commoditydata.value = res.rows
			}
		})
	}
	/*根据下滑事件判断内边距*/
	const padding = ref(30);
	/*滑动事件*/
	const handleScroll = (event) => {
		// 检查滚动位置，如果需要取消padding，则设置padding为0
		if (event.detail.scrollTop > 30) { // 100是一个阈值，表示在滚动100px后取消padding
			padding.value = 0;
		} else {
			padding.value = 30; // 恢复初始padding
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		background-color: #F2F2F2;

		.shoplist-scroll {
			box-sizing: border-box;
			padding: 30rpx 30rpx 0;

			height: calc(100vh - 195rpx);

			.shoplist {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				.shoplist-itme {
					margin-bottom: 30rpx;
					width: 330rpx;
					background-color: #FFFFFF;
					box-sizing: border-box;
					padding-bottom: 25rpx;

					image {
						width: 330rpx;
						height: 330rpx;
					}

					.title {
						box-sizing: border-box;
						padding: 0 25rpx;
						font-family: SourceHanSansSC;
						font-weight: 400;
						font-size: 28rpx;
						color: #303030;
						margin-top: 27rpx;
					}

					.inventory {
						box-sizing: border-box;
						padding: 0 25rpx;
						font-family: SourceHanSansSC;
						font-weight: 400;
						font-size: 22rpx;
						color: #BFBFBF;
						margin-top: 16rpx;
					}

					.pirceBox {
						margin-top: 35rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						box-sizing: border-box;
						padding: 0 25rpx;

						.price {
							.span1 {
								font-family: SourceHanSansSC;
								font-weight: 500;
								font-size: 36rpx;
								color: #013CAA;
							}

							.span2 {
								font-family: SourceHanSansSC;
								font-weight: 400;
								font-size: 22rpx;
								color: #BFBFBF;
							}
						}

						image {
							width: 50rpx;
							height: 50rpx;
						}
					}
				}
			}

		}

		::v-deep .u-popup__content {
			width: 90%;
			padding: 50rpx 30rpx 30rpx;

			.ScrollView {
				margin-top: 10rpx;
				height: 600rpx;
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}
		}

		.btnbox {
			margin-top: 15rpx;
			width: 100%;
			height: 100rpx;

			::v-deep .u-button {
				width: 100% !important;
				height: 100% !important;
			}
		}

		.contactBox {
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.btn {
				padding: 0;
				background: #ffffff;
				font-size: 28rpx;
				margin: 0;
				margin-left: 10rpx;
				color: #2381fe;
			}

			.btn::after {
				border: none;
			}
		}
	}
</style>